<template>
  <!-- 新增外层容器，用于承载页面背景 -->
  <div class="monitor-month-page">
    <el-col :span="4">
      <div class="tree">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini">
        </el-input>
        <el-tree @node-click="handlerClick" class="filter-tree" :data="treeData" :props="defaultProps"
          default-expand-all :filter-node-method="filterNode" ref="tree">
          <!-- 修复语法错误：default-expand-all 后添加空格 -->
        </el-tree>
      </div>
    </el-col>
    <el-col :span="20">
      <div v-if='params.device_id' class="table">
        <el-form :inline="true">
          <el-form-item>
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker value-format="yyyy-MM" v-model="form.data" type="month" placeholder="选择月">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon='el-icon-zoom-in' @click="toSearch">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon='el-icon-zoom-in' align="right">下载</el-button>
          </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="monitorData" style="width: 100%">
          <el-table-column prop="insert_time" label="日期" width="180" align="center">
            <template v-slot="scope">
              <div>
                {{ scope.row.insert_time | fmtDate }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="tsp" label="tsp" width="180">
          </el-table-column>
          <el-table-column prop="pm10" label="pm10">
          </el-table-column>
          <el-table-column prop="pm25" label="pm2.5">
          </el-table-column>
          <el-table-column prop="temperature" label="温度">
          </el-table-column>
          <el-table-column prop="humidity" label="湿度">
          </el-table-column>
          <el-table-column prop="wind_direction" label="风向">
          </el-table-column>
          <el-table-column prop="wind_speed" label="风速">
          </el-table-column>
        </el-table>
      </div>
      <div v-else class="empty-tip">请点击设备查看数据</div>
    </el-col>
  </div>
</template>

<script>
import { get } from '@/utils/request';
export default {
  data() {
    return {
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      value2: '',
      monitorData: [],
      params: {
        page: 1,
        pageSize: 10,
        device_id: 0,
        engineer_id: 0
      },
      form: { data: [] },

    }
  },
  watch: {
    //监听用户输入框输入的值并进行过滤
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {},
  methods: {
    //搜索
    toSearch() {
      this.params.page = 1;
      this.getMonitor();

    },
    //点击节点触发
    handlerClick(val, node) {
      console.log(val, node, '点击事件')
      //判断点击的是设备 将设备id 工程id page pageSize传给后端
      if (!val.children) {
        this.params.device_id = val.id;
        this.params.engineer_id = val.engineer_id;
        this.getMonitor();
      }

    },
    async getTreeData() {
      let res = await get('/engineer/findEngineerDeviceTree');
      console.log(res, 'history');
      this.treeData = res.data;
    },
    filterNode(value, data) {
      //data是树形结构的数据
      if (!value) return true;
      //value 输入框输入的值
      //返回就是包含输入框关键字的label(节点)
      return data.name.indexOf(value) !== -1;
    },
    //封装方法获取监测历史数据
    async getMonitor() {
      let temp = {
        ...this.params

      };
      //如果传了时间
      if (this.form.data) {
        temp.date = this.form.data;
      }
      let res = await get('/monitor/pageQuery', temp);
      console.log(res, '监控月报');
      this.monitorData = res.data.list;
    },
  },
  created() {
    this.getTreeData();
    this.getMonitor();
  },
  mounted() { },
};
</script>
<style scoped>
/* 页面外层容器：添加粉紫色背景，铺满视口高度 */
.monitor-month-page {
  min-height: 100vh;
  background-color: rgba(236, 192, 255, 0.3);
  padding: 15px;
  display: flex;
  /* 让左右两列横向排列 */
  gap: 15px;
  /* 列之间添加间距 */
}

.tree {
  height: calc(100vh - 90px);
  /* 适配外层内边距，避免滚动条异常 */
  padding: 10px;
  border-right: 1px solid #ececec;
  background-color: #fff;
  /* 白色背景提升树形区域可读性 */
  border-radius: 8px;
}

.table {
  width: 100%;
  background-color: #fff;
  /* 白色背景提升表格区域可读性 */
  padding: 15px;
  border-radius: 8px;
}

.block {
  padding-left: 10px;
  padding-right: 20px;
}

/* 空提示文本区域：添加白色背景，与整体风格统一 */
.empty-tip {
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  background-color: #fff;
  min-height: 200px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>